<template>
  <div class="manager-login-container">
    <div class="divBox">
      <div class="backlogobox">
        <img class="backlogo" src="../assets/backlogo.png" alt="">
      </div>
      <div class="manager-login_box" >
        <el-form :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2"
         label-position="left"
         label-width="0px"
         class="demo-ruleForm manager-login-page">
          <h4 class="title">管理员登录平台</h4>
            <el-form-item prop="username">
                <el-input type="text"
                    v-model="ruleForm2.userName"
                    auto-complete="off"
                    placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password"
                    v-model="ruleForm2.password"
                    auto-complete="off"
                    placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item  prop="isLock">
        <slider-verify-code v-model="ruleForm2.isLock" @change="handlerLock"></slider-verify-code>
      </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="danger" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
              <el-checkbox
                v-model="checked"
                class="rememberme">记住密码</el-checkbox>
            </el-form-item>


        </el-form>
    </div>
  </div>
        <vue-particles
                color="#F5EFEF"
                :particleOpacity="0.7"
                :particlesNumber="80"
                shapeType="circle"
                :particleSize="4"
                linesColor="#66A6FF"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
        >   </vue-particles>


    </div>


</template>

<script>
  import { requestLogin } from '../api/api';
  import { refreshcode } from '../api/api';
  import sliderVerifyCode from '../components/slider-verify-code.vue';
  export default {

    data() {
      const checkStatus = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请拖动滑块完成验证"));
      }
      callback();
    }

      return {
        logining: false,
        ruleForm2: {
          userName:null,
          password:null,
          isLock:false
        },
        rules2: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          isLock: [
          {validator: checkStatus, trigger: 'blur'},
        ]
        },
        checked: true
      };
    },
    components: {
    'slider-verify-code': sliderVerifyCode
  },
    methods: {
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit(ev) {
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.logining = true;
            const _this = this
            var loginForm = { userName: this.ruleForm2.userName, password: this.ruleForm2.password };
            this.$axios.post('http://localhost:8181/admin/login', loginForm)
              .then((resp) => {
                const result =resp.data
                if (result=='success') {
                  this.$message({
                    type: 'success',
                    message: '登录成功',
                  });
                  sessionStorage.removeItem('manager')
                  sessionStorage.setItem('manager',JSON.stringify(loginForm))
                  this.$router.push('/manager');

                } else {
                  this.$message({type: "error", message: result})
                  _this.logining=false
                  return false;

                }
              })
          } else {
            console.log('error submit!!');
            return false;
          }

        });
      },
      refreshcode(){
          this.uuid = this.getuuid()
          var refreshParams = { code: this.ruleForm2.identifycode};
            refreshcode(refreshParams).then(data => {
              this.imgUrl = serverUrl + "" + this.uuid
            }).catch((error) => {
                this.$message({
                  message: "服务器请求出错，请重试！",
                  type: 'error'
                });
            });
      },
      register(){
          this.$alert('请联系管理员找回密码，管理员电话：131xxxxxxxx', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      },
      handlerLock(data) {
      if (data) {
        this.$refs.ruleForm2.validateField('isLock');
      }
    },
    }
  }
</script>

<style scoped>


</style>
